<template>
    {{ a }}
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="货主姓名：" prop="ownerName">
      <el-input v-model="ruleForm.ownerName" placeholder="请输入货主姓名"  />
    </el-form-item>
    <el-form-item label="手机号：" prop="ownerPhone">
      <el-input v-model="ruleForm.ownerPhone" placeholder="请输入手机号"  />
    </el-form-item>
    <el-form-item label="单位名称：" prop="ownerUnit">
      <el-input v-model="ruleForm.ownerUnit" placeholder="请输入单位名称"  />
    </el-form-item>
    <el-form-item label="联系地址：" prop="ownerAddress">
      <el-input v-model="ruleForm.ownerAddress" placeholder="请输入联系地址"  />
    </el-form-item>
    <el-form-item label="驾驶证有效日期：" prop="lineName">
      <el-col :span="11">
        <el-form-item prop="ownerDrivinglicenseDate">
          <el-date-picker
            v-model="ruleForm.ownerDrivinglicenseDate"
            type="date"
            aria-label="Pick a date"
            placeholder="请选择驾驶证有效日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="备注：" prop="ownerRemark">
      <el-input v-model="ruleForm.ownerRemark" type="textarea" placeholder="请输入备注信息"  />
    </el-form-item>
    <el-form-item label="驾驶证照片：" prop="ownerDrivinglicenseImg">
      <el-upload
    class="avatar-uploader"
    action="FoundationWrite/api/Owner/Uimg"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="ruleForm.ownerDrivinglicenseImg" :src="'FoundationWrite/pic/'+ruleForm.ownerDrivinglicenseImg" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
    
  </el-form>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute();
const a = route.query.ownerId
import { reactive, ref,onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from "axios";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//生命周期函数钩
onMounted(function () {
    fantian();
})
//反填字段
const ruleForm = reactive({
  ownerName: "",
  ownerPhone: "",
  ownerUnit: "",
  ownerAddress: "",
  ownerDrivinglicenseDate: "",
  ownerRemark: "",
  ownerDrivinglicenseImg: "",
    ownerId: route.query.ownerId,
  createDate:""
});
//图片上传
const handleAvatarSuccess = (img: any) => {
    ruleForm.ownerDrivinglicenseImg = img;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg') {
    ElMessage.error('只能是jpeg jpg形式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('照片最大不能超过 5MB!')
    return false
  }
  return true
}
//反填方法
const fantian = () => {
    axios.get("FoundationRead/api/Owner/FanTianOwner", {
        params: {
            ownerId:route.query.ownerId
        }
    })
        .then(res => {
            ruleForm.ownerName = res.data.data.ownerName;
            ruleForm.ownerPhone = res.data.data.ownerPhone;
            ruleForm.ownerUnit = res.data.data.ownerUnit;
            ruleForm.ownerAddress = res.data.data.ownerAddress;
            ruleForm.ownerDrivinglicenseDate = res.data.data.ownerDrivinglicenseDate;
            ruleForm.ownerRemark = res.data.data.ownerRemark;
            ruleForm.ownerDrivinglicenseImg = res.data.data.ownerDrivinglicenseImg;
            ruleForm.createDate = res.data.data.createDate;
            console.log(res.data.data)
    })
}



</script>
<!-- 图片上传 -->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

